import 'package:flutter/material.dart';
import 'package:pp_uikit/theme/pp_default_theme.dart';

enum PPImageButtonDirection {
  /// 文字在左边
  left,

  /// 文字在右边
  right,

  /// 文字在上边
  top,

  /// 文字在下边
  bottom,
}

class PPImageButton extends StatefulWidget {
  /// icon的文案
  final String name;

  /// 需要传的icon
  final Widget? iconWidget;

  /// 背景颜色
  final Color? color;

  /// 点击的回调
  final VoidCallback? onTap;

  /// 文字相对于图片的位置
  final PPImageButtonDirection direction;

  /// 图片宽度，默认 24
  final double imageWidth;

  /// 图片高度，默认 24
  final double imageHeight;

  /// 字体大小，默认 11
  final double fontSize;

  ///  文字样式
  final TextStyle? style;

  /// 图文组合的宽度，默认 80
  final double width;

  /// 图文组合的高度，默认 80
  final double height;

  /// 文字和图片的间距，默认 4
  final double imagePadding;

  final EdgeInsetsGeometry? padding;

  final EdgeInsetsGeometry? margin;

  /// 圆角，默认 0
  final double radius;

  /// 描边
  final Color? borderColor;
  final double borderWidth;

  /// 图文对齐方式，默认 MainAxisAlignment.center
  final MainAxisAlignment mainAxisAlignment;

  const PPImageButton({
    Key? key,
    required this.name,
    this.iconWidget,
    this.onTap,
    this.color,
    this.imageWidth = 24,
    this.imageHeight = 24,
    this.fontSize = 11,
    this.width = 80,
    this.height = 80,
    this.radius = 0,
    this.direction = PPImageButtonDirection.top,
    this.imagePadding = 4,
    this.padding,
    this.margin,
    this.style,
    this.borderColor,
    this.borderWidth = 0.0,
    this.mainAxisAlignment = MainAxisAlignment.center,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _PPImageButtonState();
}

class _PPImageButtonState extends State<PPImageButton> {
  @override
  Widget build(BuildContext context) {
    BorderDirectional? border;
    if (widget.borderColor != null) {
      border = BorderDirectional(
        top: BorderSide(
            color: widget.borderColor!,
            width: widget.borderWidth,
            style: BorderStyle.solid),
        start: BorderSide(
            color: widget.borderColor!,
            width: widget.borderWidth,
            style: BorderStyle.solid),
        end: BorderSide(
            color: widget.borderColor!,
            width: widget.borderWidth,
            style: BorderStyle.solid),
        bottom: BorderSide(
            color: widget.borderColor!,
            width: widget.borderWidth,
            style: BorderStyle.solid),
      );
    }

    Container ctn;
    // 图文的方向 bottom、文字在下 icon在上 top、文字在上 icon在下
    // Left、文字在左 icon在右 right、文字在右 icon在左
    if (widget.direction == PPImageButtonDirection.bottom) {
      ctn = Container(
        height: widget.height,
        width: widget.width,
        margin: widget.margin,
        padding: widget.padding,
        color: widget.radius == 0 ? widget.color : null,
        decoration: widget.radius == 0
            ? null
            : BoxDecoration(
                color: widget.color,
                borderRadius: BorderRadius.circular(widget.radius),
                border: border,
              ),
        child: Column(
          mainAxisAlignment: widget.mainAxisAlignment,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // 图片
            SizedBox(
                height: widget.imageHeight,
                width: widget.imageWidth,
                child: widget.iconWidget),
            Padding(
              padding: EdgeInsets.only(top: widget.imagePadding),
              child: Text(
                widget.name,
                style: widget.style ??
                    TextStyle(
                      height: 1,
                      fontSize: widget.fontSize,
                      color: PPDefaultTheme.instance.colorTextBase,
                    ),
                overflow: TextOverflow.ellipsis,
              ),
            )
          ],
        ),
      );
    } else if (widget.direction == PPImageButtonDirection.right) {
      ctn = Container(
        height: widget.height,
        width: widget.width,
        margin: widget.margin,
        padding: widget.padding,
        color: widget.radius == 0 ? widget.color : null,
        decoration: widget.radius == 0
            ? null
            : BoxDecoration(
                color: widget.color,
                borderRadius: BorderRadius.circular(widget.radius),
                border: border,
              ),
        child: Row(
          mainAxisAlignment: widget.mainAxisAlignment,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // 图片
            SizedBox(
                height: widget.imageHeight,
                width: widget.imageWidth,
                child: widget.iconWidget),
            Flexible(
              child: Padding(
                padding: EdgeInsets.only(left: widget.imagePadding),
                child: Text(
                  widget.name,
                  style: widget.style ??
                      TextStyle(
                        height: 1,
                        fontSize: widget.fontSize,
                        color: PPDefaultTheme.instance.colorTextBase,
                      ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
          ],
        ),
      );
    } else if (widget.direction == PPImageButtonDirection.left) {
      ctn = Container(
        height: widget.height,
        width: widget.width,
        margin: widget.margin,
        padding: widget.padding,
        color: widget.radius == 0 ? widget.color : null,
        decoration: widget.radius == 0
            ? null
            : BoxDecoration(
                color: widget.color,
                borderRadius: BorderRadius.circular(widget.radius),
                border: border,
              ),
        child: Row(
          mainAxisAlignment: widget.mainAxisAlignment,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Padding(
                padding: EdgeInsets.only(right: widget.imagePadding),
                child: Text(
                  widget.name,
                  style: widget.style ??
                      TextStyle(
                        height: 1,
                        fontSize: widget.fontSize,
                        color: PPDefaultTheme.instance.colorTextBase,
                      ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),

            // 图片
            SizedBox(
                height: widget.imageHeight,
                width: widget.imageWidth,
                child: widget.iconWidget),
          ],
        ),
      );
    } else {
      ctn = Container(
        height: widget.height,
        width: widget.width,
        margin: widget.margin,
        padding: widget.padding,
        color: widget.radius == 0 ? widget.color : null,
        decoration: widget.radius == 0
            ? null
            : BoxDecoration(
                color: widget.color,
                borderRadius: BorderRadius.circular(widget.radius),
                border: border,
              ),
        child: Column(
          mainAxisAlignment: widget.mainAxisAlignment,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(bottom: widget.imagePadding),
              child: Text(
                widget.name,
                style: widget.style ??
                    TextStyle(
                      height: 1,
                      fontSize: widget.fontSize,
                      color: PPDefaultTheme.instance.colorTextBase,
                    ),
                overflow: TextOverflow.ellipsis,
              ),
            ),

            // 图片
            SizedBox(
              height: widget.imageHeight,
              width: widget.imageWidth,
              child: widget.iconWidget,
            ),
          ],
        ),
      );
    }

    if (widget.onTap != null) {
      return GestureDetector(
        child: ctn,
        onTap: () {
          widget.onTap!();
        },
      );
    }
    return ctn;
  }
}
